<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王申洄机试代码</title>
</head>
<style>
    body{
        margin: 0 auto;
        padding: 0;
    }
    .box{
        width: 100%;
        position: relative;
    }
    /* 左侧文本框样式开始 */
    .box-left{
        width: 281px;
        position: absolute;
        box-shadow: 0 0 7px rgba(0, 0, 0,.3);
        top: 10px;
        left: 10px;
        padding: 15px;
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
    }
    input{
        margin-top: -10px;
        width: 260px;
    }
    button{
        margin-top: 20px;
        width: 266px;
        background-color: #33d9b2;
        color: aliceblue;
        border: 0px;
        border-radius: 5px;
        height: 28px;
    }
    select{
        width: 266px;
    }
    .sex{
        left: 100px;
        width: 50px;
    }   
    .from{
        left: 50px;
        width: 70px;
    }   

    /* 左侧文本框样式结束 */
    .box-right{
        width: 1000px;
        position: absolute;
        box-shadow: 0 0 7px rgba(0, 0, 0,.3);
        top: 10px;
        left: 331px;
        padding: 15px;
        font-size: 16px;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }

    .box-right td{
        width:190px;
        /* border:2px solid #33d9b2; */

    }
    .box-right tr{
        border-top: 1px solid #777;
    }
    .box-right .checkBox{
        width: 50px;
        text-align: left;
    }
    .checkBox input{
        width: 20px;
    }
    tbody td{
        border-bottom:2px solid #33d9b2;
    }
    .count{
        width: 50px;
        background-color: #b33939;
    }
    .counts{
        width: 50px;
        background-color: #b33939;
    }
</style>
<body>
    <!-- 左侧展示两个文本框 -->
    <div class="box">
        <div class="box-left">
            <h3>录入新用户</h3>
            <p>用户名</p>
            <input class="UserName" type="text"><br>
            <p>手机号</p>
            <input class="tel" type="text"><br>
            <p>地址&nbsp;</p>
            <select class="selectbox" id="">
                <option value="默认">默认</option>
                <option value="湖南">湖南</option>
                <option value="湖北">湖北</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </select>
            <p>用户来源</p>
            <div class="check-box">
                <span>传单</span>
                <input class="from" type="checkbox" value="传单">
                <span>朋友推荐</span>
                <input class="from" type="checkbox" value="朋友推荐">
                <span>美团</span>
                <input class="from" type="checkbox" value="美团">
                <span>抖音&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <input class="from" type="checkbox" value="抖音">
            </div>
            <div class="sex-box">
                <p>性别</p>
                <span>男</span>
                <input class="sex" type="radio" value="男">
                <span>女</span>
                <input class="sex" type="radio" value="女">
            </div>
            <button class="input">录入</button>
        </div>

        <!-- 右侧文本框 -->
        <div class="box-right">
            <table>
                <thead>
                    <tr>
                        <td class="checkBox"><input class="Checked" type="checkbox"></td>
                        <td>姓名</td>
                        <td>手机号</td>
                        <td>城市</td>
                        <td>用户来源</td>
                        <td>性别</td>
                        <td><button class="count">删除</button></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="checkBox"><input type="checkbox"></td>
                        <td class="table-td"></td>
                        <td class="table-td"></td>
                        <td class="table-td"></td>
                        <td class="table-td"></td>
                        <td class="table-td"></td>
                        <td><button class="counts" onclick="remove(this)">删除</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
</body>
<script>
    var infoList = document.querySelector('.box-left').querySelectorAll("input");
    // console.log(infoList);
    var check_box = document.querySelector('.check-box').querySelectorAll('input');  
    var radio_box = document.querySelector('.box-left').querySelectorAll('.sex');
    var selectInfo = document.querySelector('.selectbox')
    console.log(selectInfo);
    function info_Obj(name,tel,adderss,from,sex){
        return{
            name:name,
            tel:tel,
            adderss:adderss,
            from:from,
            sex:sex
        }
    }
    var fromlist = function() {
        var check_box_list = []
            for (let i = 0; i < check_box.length; i++) {
                if(check_box[i].checked){
                    check_box_list.push(check_box[i].value);
                }
            }
        return check_box_list;
    }
    radio_box[0].onclick=function () {
        radio_box[1].checked = false
    }
    radio_box[1].onclick=function () {
        radio_box[0].checked = false
    }
    var sexInfo = function() {
        var sex = ''
        for (let i = 0; i < radio_box.length; i++) {
            if (radio_box[i].checked) {
                sex =  radio_box[i].value
            }
            
        }
        return sex;
    }
    var tablerow = document.querySelectorAll('.table-td')
    var rowfa = document.querySelector('tbody')
    var btn = document.querySelector('.input')
    var counts = []
    btn.onclick  = function() {
        var name =infoList[0].value;
        var tel = infoList[1].value;
        var frominfo = fromlist();
        var sexInfos = sexInfo();
        var selectInos = selectInfo.value
        var info_Objs = info_Obj(name,tel,frominfo,sexInfos,selectInos)
        console.log(info_Objs.frominfo);
        var inforow = document.createElement('tr')
        inforow.innerHTML = 
        '<td class="checkBox"><input type="checkbox"></td>'+
        '<td class="table-td">'+
        info_Objs.name+'</td><td class="table-td">'+
        info_Objs.tel+'</td><td class="table-td">'+
        info_Objs.adderss+'</td><td class="table-td">'+
        info_Objs.from +'</td><td class="table-td">'+
        info_Objs.sex +'</td><td><button class="counts" onclick="remove(this)">删除</button></td>';
        rowfa.insertBefore(inforow,rowfa.firstChild);
        counts.push(document.querySelector('tbody').firstChild)
    }
    var count = document.querySelector('.count')
    var all = document.querySelector('.Checked')
    // console.log(check_s);
    all.onclick = function(){
        var check_s = document.querySelector('tbody').querySelectorAll('input')
        for (let i = 0; i < check_s.length; i++) {
            check_s[i].checked = all.checked
            
        }
    }


    count.onclick = function () {
        var check_s = document.querySelector('tbody').querySelectorAll('input')
        var tr_s = document.querySelector('tbody').querySelectorAll('tr')
        for (let i = 0; i < check_s.length; i++) {
            if (!check_s[i].checked) {
                tr_s[i].innerHTML = ''
            }
        }
    }
    function remove(obj){
        var parent = obj.parentNode.parentNode;
        parent.parentNode.removeChild(parent);
    }

</script>
</html>